<script setup lang="ts">
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { useQuery } from "@/hooks/init";
import { useShare } from "@/hooks/share";
import { home_api } from "@/package/other/api/help_center";
import { AppData } from "@/utils/app";
import { Router } from "@/utils/router";

import PageSticky from "@/components/page/sticky.vue";

onLoad((options) => {
  useQuery(options as MiniApp.AppLaunchOption, () => {
    home_api({ package_name: AppData.bundleData.bundleName, platform: 3 }).then(
      (resp) => {
        typeList.value = resp.cate_list;
        listData.value = resp.items;
      }
    );

    shareOption.title = "帮助中心";
  });
});

const typeList = ref<any[]>([]);
const typeClick = (index: number) => {
  const type = typeList.value[index];
  Router.navigateTo(
    `/package/other/pages/question/list?${Router.dataToQuery({
      id: type.id,
      name: type.title,
    })}`
  );
};

const listData = ref<any[]>([]);
const detailClick = (index: number) => {
  const item = listData.value[index];
  Router.navigateTo(
    `/package/other/pages/question/detail?${Router.dataToQuery({
      id: item.id,
      name: item.title,
    })}`
  );
};

const { onShareAppMessage, onShareTimeline, shareOption } = useShare(
  "/package/other/pages/question/index"
);
</script>

<template>
  <PageSticky>
    <scroll-view class="index-type" scroll-x enhanced :show-scrollbar="false">
      <view
        class="index-type-item"
        v-for="(i, d) of typeList"
        :key="i.id"
        @click="typeClick(d)"
      >
        <image class="index-type-icon" :src="i.logo" />
        <view class="index-type-name">{{ i.title }}</view>
      </view>
    </scroll-view>

    <view class="index-title">常见问题</view>
  </PageSticky>

  <view class="index-data">
    <view
      class="index-data-item"
      v-for="(i, d) of listData"
      :key="i.id"
      @click="detailClick(d)"
    >
      <view class="index-data-name">{{ i.title }}</view>
      <image
        class="index-data-arrow"
        src="@/package/other/static/question-arrow.png"
      />
    </view>
  </view>
</template>

<style lang="scss">
page {
  background-color: #ffffff;
}

.index-type {
  height: 210rpx;
  white-space: nowrap;

  .index-type-item {
    display: inline-block;
    vertical-align: top;
    width: 160rpx;
    margin-top: 30rpx;
  }

  .index-type-icon {
    display: block;
    width: 100rpx;
    height: 100rpx;
    margin: 0 auto 12rpx;
  }

  .index-type-name {
    font-size: 24rpx;
    color: #666666;
    line-height: 32rpx;
    text-align: center;
  }
}

.index-title {
  padding-left: 30rpx;
  font-size: 30rpx;
  color: #333333;
  line-height: 70rpx;
  font-weight: bold;
  background-color: #f8f8f8;
}

.index-data {
  padding-bottom: 40rpx;

  .index-data-item {
    display: flex;
    align-items: center;
    padding: 0 30rpx;
    height: 100rpx;
  }

  .index-data-name {
    flex-grow: 1;
    min-width: 0;
    font-size: 30rpx;
    color: #333333;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .index-data-arrow {
    flex-shrink: 0;
    margin-left: 20rpx;
    width: 24rpx;
    height: 24rpx;
  }
}
</style>